import { axhttp } from '@/shared/axhttp';
import { axurl } from '@/shared/axurl';
import React, { useState, useEffect } from 'react';
import { Form, Row, Col, Input, message } from 'antd';
// import InfiniteScroll from 'react-infinite-scroller';
const InfiniteScroll = require('react-infinite-scroller');
import { axconst } from '@/shared/axconst';
import AxModal from '@/components/AxForm/AxModal';
import { AxTable } from '@/components/AxList';
import AxColumnAction from '@/components/AxList/AxColumnAction';

const { getListX } = axhttp;
const url = axurl.center.s.flow.need;
const { Search } = Input;
/**
 * 自定义选择缴费人
 * @param searchValue 查询内容
 * @param autoSelect 当只有一条数据时，自动选中
 * @param visible 可见性
 * @param handleVisible 可见性处理函数
 * @param handleSelect 选择处理函数
 */
const User: React.FC<any> = props => {
    const {
        form,
        searchField = 'keyword',
        searchValue,
        autoSelect = false,
        handleSelect,
        handleVisible,
        setSearchLoading,
        ...rest
    } = props;
    const [data, setData] = useState<any>({
        list: [],
        pagination: {},
        success: false,
    });
    const [loading, setLoading] = useState(false);
    const [visible, setVisible] = useState(false);
    /** 查询字段 */
    let field = {};
    /** 分页初始值 */
    let page = axconst.page.params;

    useEffect(() => {
        if (searchValue && searchValue.trim() !== '') handleSearch(searchValue.trim());
        else setVisible(true);
    }, [searchValue]);

    /** 点击行选中 */
    const handleClickRow = (record: any) => {
        if (handleSelect) handleSelect({
            value: record.userId,
            text: record.userName,
        });
        if (handleVisible) handleVisible();
    };

    /** 搜索 */
    const handleSearch = (val: any) => {
        if (val && val.trim() !== '') {
            field[searchField] = val.trim();
        } else {
            field = {};
        }
        return handleRead();
    };

    /** 读取数据 */
    const handleRead = () => {
        setLoading(true);
        setSearchLoading(true);
        getListX(url.readAllUserList, null, { ...page, ...field }).then((res: any) => {
            if (autoSelect === true && res.list.length === 0) {
                handleClickRow({});
                message.success('暂无数据');
            }
            else if (autoSelect === true && res.list.length === 1) {
                handleClickRow(res.list[0]);
                message.success('选择成功');
            }
            else {
                setData(res);
                setVisible(true);
            }
        }).finally(() => {
            setLoading(false);
            setSearchLoading(false);
        });
    };

    /** 待选列 */
    const columns = [
        {
            title: '姓名',
            dataIndex: 'userName',
            width: axconst.width.fouronly,
            ellipsis: true,
        },
        {
            title: '手机号',
            dataIndex: 'mobile',
            width: axconst.width.phone,
            ellipsis: true,
        },
        {
            title: '操作',
            width: axconst.width.two,
            render: (val: any, record: any) => (
                <AxColumnAction
                    buttons={[
                        {
                            text: '选择',
                            onClick: () => handleClickRow(record),
                        },
                    ]}
                />
            ),
        },
    ];

    return (
        <AxModal
            {...rest}
            title='选择接收人'
            showLoading={false}
            footer={false}
            visible={visible}
            handleVisible={handleVisible}
            width='30%'
            items={[
                <Row gutter={12}>
                    <Col span={24}>
                        <Search
                            placeholder='请输入姓名/手机号'
                            onSearch={val => handleSearch(val)}
                            defaultValue={searchValue}
                            style={{ width: '100%' }}
                            allowClear
                        />
                        <div className='demoInfiniteContainer'>
                            <InfiniteScroll
                                initialLoad={false}
                                pageStart={0}
                                loadMore={() => { }}
                                useWindow={false}
                            >
                                <AxTable
                                    selectFirstRecord
                                    checkboxType='radio'
                                    columns={columns}
                                    data={data}
                                    loading={loading}
                                    showPagination={false}
                                    checkboxFixed={false}
                                    onDoubleClick={handleClickRow}
                                />
                            </InfiniteScroll>
                        </div>
                    </Col>
                </Row>,
            ]}
        ></AxModal>
    );
};

export default Form.create<any>()(User);
